<template>
  <el-table :data="paperJudgeInfo" border v-loading="loading">
    <el-table-column prop="id" label="题目编号" width="100"></el-table-column>
    <el-table-column prop="subject" label="所属科目" width="100"></el-table-column>
    <el-table-column prop="question" label="题目" width="180"></el-table-column>
    <el-table-column prop="score" label="分数" width="120"></el-table-column>
    <el-table-column prop="answer" label="正确答案" width="100"></el-table-column>
    <el-table-column prop="analysis" label="题目解析" width="500"></el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="scope">
        <el-button @click="remove(scope.row.id)" type="danger" size="small">移除试题</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-config-provider :locale="zhCn">
    <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageNumChange"
        :current-page="pagination.pageNum"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
  </el-config-provider>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router/dist/vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
  name: "lookJudge",
  setup(){
    const {proxy} = getCurrentInstance()
    const route = useRoute()
    let loading = ref(false)
    let paperJudgeInfo = ref([])
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 5 //每页条数
    })
    onMounted(()=>{
      getJudgeInfo()
    })
    function getJudgeInfo(){
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/manage/judge/look/${route.query.id}/${pagination.pageNum}/${pagination.pageSize}`
      ).then(
          response => {
            paperJudgeInfo.value = [...response.data.list]
            pagination.total = response.data.total
            pagination.pageNum = response.data.pageNum
            pagination.pageSize = response.data.pageSize
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getJudgeInfo()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getJudgeInfo()
    }
    function remove(id){
      ElMessageBox.confirm(
          '是否移除试题！！！',
          '警告',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }
      ).then(() => {
        proxy.$axios.delete(`/manage/paper/map/delete/${route.query.id}/3/${id}`).then(
            response => {
              if (response.data){
                ElMessage({
                  type: 'success',
                  message: '移除成功',
                })
                getJudgeInfo()
              }
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消移除',
        })
      })
    }
    return{
      paperJudgeInfo,
      loading,
      pagination,
      pageSizeChange,
      pageNumChange,
      remove,
      zhCn
    }
  }
}
</script>

<style scoped>

</style>